<div id="aboveContent">
  <div id="topicHolder" class="starters">
    <div class="headerBox"><div class="headerText">Start From Topic</div></div>
    <form
      id="gpt-topic"
      action="javascript:submitForm('gpt-topic')"
    >
      <input placeholder="Topic..." class="inputpad" type="text" id="pname" name="pname" /><br />
      <input type="submit" value="Submit" />
    </form>
  </div>

  <div id="argsHolder" class="starters">
    <div class="headerBox"><div class="headerText">Start From Discussion</div></div>
    <form
      id="gpt-args"
      action="javascript:submitForm('gpt-args')"
    >
      <textarea class="inputpad" placeholder="Discussion..." type="text" id="aname" name="aname"></textarea
      ><br />
      <input type="submit" value="Submit" />
    </form>
  </div>
</div>

<!-- content -->
<div id="paper-tools">
  <div class="toolholder">
    <button type="button" class="div1" onclick="addBox()">&#43;</button>
    <button id="objDelete" type="button" class="div1">&#8722;</button>
    <button id="joiner" type="button" class="div1 standardSize" onclick="joinNodes()"> Join </button>
  </div>
  <div class="grower"></div>
  <div>
    <input id="textEditor" placeholder="element text..." onchange="updateText()">
  </div>
  <div class="grower"></div>
  <div>
    <label for="scaler">Scale:</label>
    <input type="number" name="scaler" id="scaler" step="0.25" value="1" placeholder="scale" onchange="scalePaper()"/>
  </div>
</div>
<div id="paper-container">
  <div id="jointPaper"></div>
</div>

<script>
  var namespace = joint.shapes;

  var graph = new joint.dia.Graph({}, { cellNamespace: namespace });

  let canvas = document.getElementById("jointPaper");

  var paper = new joint.dia.Paper({
    el: canvas,
    model: graph,
    width: 3000,
    height: 3000,
    gridSize: 1,
    cellViewNamespace: namespace,
    gridSize: 25,
    drawGrid: true,
    background: {
      color: "rgba(33,33,33,0.7)",
    },
    overflow: false,
  });
  // paper.scale(0.4, 0.4)

  var rect = new joint.shapes.standard.Rectangle();
  rect.position(100, 30);
  rect.resize(100, 40);
  rect.attr({
    body: {
      fill: "blue",
    },
    label: {
      text: "Hello",
      fill: "white",
    },
  });
  rect.addTo(graph);

  var rect2 = rect.clone();
  rect2.translate(300, 0);
  rect2.attr("label/text", "World!");
  rect2.addTo(graph);

  var link3 = new joint.shapes.standard.Link();
  link3.source(rect2);
  link3.target(rect);
  link3.addTo(graph);

  let objects = [rect, rect2, link3];
</script>
